<template>
  <div class="home">
    <button @click="addNote">新增便签</button>

    <ul>
      <li v-for="note in notes" :key="note.id" @click="addNote(note.id)">
        {{ note.title || "未命名便签" }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ipcApiRoute } from '@/api';
import { ref, onMounted } from "vue";
import { ipc } from '@/utils/ipcRenderer';
const { ipcRenderer } = window.require("electron");
const notes = ref([]);




onMounted(async () => {
  init();
  notes.value = await ipc.invoke(ipcApiRoute.windows.getNotes);
});

function init() {
  ipc.on('refreshNotesList', async (event, result) => {
    console.log('refreshNotesList result-------:', result);

    notes.value = await ipc.invoke(ipcApiRoute.windows.getNotes);
  })
}

const addNote = async (id) => {
  console.log("editNote--------", id);
  // notes.value.push({ title: "", content: "" });
  ipc.invoke(ipcApiRoute.windows.addNode, {id: id});
  // await ipcRenderer.invoke("save-notes", notes.value);
  // ipcRenderer.send("open-note", notes.value.length - 1);
};

const editNote = async () => {
  // console.log("editNote--------", index);
  // notes.value.push({ title: "", content: "" });
  // ipc.invoke(ipcApiRoute.windows.addNode, index);
  // await ipcRenderer.invoke("save-notes", notes.value);
  // ipcRenderer.send("open-note", notes.value.length - 1);
};
// const editNote = async (index) => {
//   console.log("editNote--------", index);
//   ipcRenderer.send("open-note", index);
// };
</script>

<style scoped>
.home {
  padding: 20px;
  text-align: center;
}
button {
  margin-bottom: 10px;
}
ul {
  list-style: none;
  padding: 0;
}
li {
  cursor: pointer;
  padding: 10px;
  border: 1px solid #ccc;
  margin: 5px;
}
</style>
